<template>
    <div>
        <div style="padding: 10px 0">
            <el-input style="width: 200px" placeholder="请输入名称" suffix-icon="el-icon-search"></el-input>
            <!--            <el-button class="ml-5" style="background-color:#42b983;color: #FFFFFF" @click="load">搜索</el-button>-->
            <!--            <el-button style="background-color:#4198b9;color: #FFFFFF" @click="reset">重置</el-button>-->
            <el-button class="ml-5" type="primary" @click="load">搜索</el-button>
            <el-button type="warning" >重置</el-button>
            <el-select style="margin-left: 450px" v-model="value" placeholder="请选择问卷类型">
                <el-option
                        v-for="item in options"
                        :key="item.id"
                        :label="item.label"
                        :value="[item.label,item.id]">
                </el-option>
            </el-select>
        </div>
        <el-row :gutter="12">
            <el-col :span="8">
                <el-card shadow="always">
                    <img src="@/assets/img_1.png" class="image">
                    <el-row>
                        <h3>
                            疫情
                        </h3>
                        <div style="color: #9F9F9F">
                            国家疫情上报问卷 本问卷主要实现健康码以及个人体温信息
                            <el-button type="text" class="button" @click="button">查看数据</el-button>
                        </div>
                    </el-row>
                </el-card>
            </el-col>

            <el-col :span="8">
                <el-card shadow="always">
                    <img src="@/assets/img_3.png" class="image">
                    <el-row>
                        <h3>
                            考试
                        </h3>
                        <div style="color: #9F9F9F">
                            作为线上考试模板，提供主观题、客观题，提出分数，可以查看最终的结果等等
                            <el-button type="text" class="button">查看数据</el-button>
                        </div>
                    </el-row>
                </el-card>
            </el-col>

            <el-col :span="8">
                <el-card shadow="always">
                    <img src="@/assets/img_2.png" class="image">
                    <el-row>
                        <h3>
                            性格
                        </h3>
                        <div style="color: #9F9F9F">
                            测试你的内向性格,本测试主要起到测试性格的作用。。。。。
                            <el-button type="text" class="button">查看数据</el-button>
                        </div>
                    </el-row>
                </el-card>
            </el-col>
        </el-row>

    </div>
</template>

<script>
    export default {
        name: "SelectQuestionnaire",
        data() {
            return {
                currentDate: new Date(),
                options: [{//身份选择
                    id: '1',
                    label: '疫情'
                }, {
                    id: '2',
                    label: '考试'
                }, {
                    id: '3',
                    label: '性格'
                }],
                value: ''
            }
        },
        created() {
            this.load()
        },
        methods: {
            load() {
            },
            button(){
                this.$router.push({path: '/Consumer/QuestionStatistics'})
            }
        }
    }
</script>

<style scoped>
    .title-dj{

    }

    .el-col{
        margin-top: 20px;
    }
    .image{
        width: 100%;
        height: 180px;
    }
    .button {
        padding: 0;
        float: right;
    }
    .el-col{
        width: 20%;
    }
    button.noselect svg {
        width: 10px;
        fill: #eee;
    }

    button:focus {
        outline: none;
    }

    button:active .icon svg {
        transform: scale(0.8);
    }

    button.edit svg {
        width: 10px;
    }

    button.query svg {
        width: 10px;
    }
</style>